<template>
  <vue-modal
    @submitData="batchCheckComment"
    modalName="batchCheckModal"
    modalWidth="800"
    modalTitle="批量审核"
    ref="batchCheckModal">
      <div slot="content" class="form-box">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="message-box">
          <h3 class="name-title">审核结果</h3>
          <p class="name-star">*</p>
        </div>
        <el-select class="input-select" v-model="form.checkResult" placeholder="请选择审核结果">
          <el-option
            v-for="item in checkResultStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="message-box" v-if="form.checkResult === 3">
          <h3 class="description-title">原因备注</h3>
          <span :class="showErrorTip? 'description-tip showTip': 'description-tip'">长度不超过200个字符</span>
        </div>
        <el-input
          v-if="form.checkResult === 3"
          type="textarea"
          v-model="form.failureInfo"
          :rows="3"
          maxlength="200"
          @focus="focusInputError"
          @blur="blurInputError"
        ></el-input>
      </el-form>
    </div>
  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';

  import {batchCheckComment} from "../../../network/viewsRequest/comment";

  export default {
    name: "BatchCheckTemplate",
    data() {
      return {
        form: {
          checkResult: null,
          failureInfo: '',
          commentIds: [],
        },
        // rawIds: [], // 未经过筛选从父组件中直接传递过来的id集合
        checkResultStatus: [{
          value: 2,
          label: '审核通过',
        }, {
          value: 3,
          label: '审核失败'
        }],
        showErrorTip: false,
      }
    },
    props: {
      multiSelections: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    // watch: {
    //   multiSelections: function(newVal) {
    //     this.rawIds = newVal;
    //   }
    // },
    components: {
      VueModal
    },
    methods: {
      show() {
        this.form = {};
        this.$refs.batchCheckModal.show();
      },
      focusInputError() {
        this.showErrorTip = true;
      },
      blurInputError() {
        this.showErrorTip = false;
      },
      /**
       * 批量审核的方法
       */
      batchCheckComment() {
        // 1.在父组件的值multiSelections中筛选出原状态和本次操作不同的记录作为本次操作的记录
        let result = this.form.checkResult;
        this.form.commentIds = this.multiSelections.filter(item => {
          if (item.commentStatus != result) {
            // if (item.commentStatus != result && item.authorName != '超级管理员') {
            return true;
          }
        }).map(item => {
          return item.id;
        });
        // 2.进行操作
        batchCheckComment(this.form).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '批量审核评论成功！'
            });
            // 关闭模态框
            this.$refs.batchCheckModal.closeModal();
            // 刷新表格
            this.$emit("loadTable");
          }
        });

      }
    }
  }
</script>

<style scoped>
  .message-box {
    position: relative;
  }
  .name-star {
    position: absolute;
    top: 0px;
    left: 75px;
    color: #F56C6C;
  }
  .message-box {
    margin-bottom: 10px;
  }
  .input-select {
    margin-bottom: 30px;
  }

  .form-box {
    width: 500px;
    margin: 0 auto;
  }
  h3 {
    display: inline-block;
  }
  .name-tip,.description-tip,.sort-tip,.category-tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .message-box .showTip {
    visibility: visible;
  }
</style>